<template>
	<view class="recharge">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">充值</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="unit">USDT</view>
			<view class="code_view">
				<view>
					<uv-qrcode ref="qrcode" :value="qrcode_url" :options="options"></uv-qrcode>
				</view>
				<view class="btn" @click="submit">{{$t('my.保存二维码')}}</view>
				<view class="key">地址</view>
				<view class="value">{{qrcode_url}}</view>
				<view class="copy" @click="copy(qrcode_url)">{{$t('my.复制地址')}}</view>
			</view>
			<view class="desc">
				<view>1.上述地址为LST充值站内地址，会员间可通过该地址进行互转</view>
				<view>2.最小充值金额为100LST</view>
				<view>3.充值前请确认核对自己的地址</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userInfo,
		userProduct
	} from "@/request/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";
	import useStore from "@/stores/index.js";
	const {
		useUserStore
	} = useStore();

	import useBase from "@/hooks/useBase.js";
	const {
		copy,
		preview_image
	} = useBase();
	const options = ref({});
	const qrcode_url = ref("");

	qrcode_url.value = useUserStore.user_info.address;
	options.value = {
		data: qrcode_url.value,
		size: 300,
		useDynamicSize: false,
		margin: 5
	};

	const qrcode = shallowRef();
	const submit = () => {
		qrcode.value.toTempFilePath({
			success: (res) => {
				let url = res.tempFilePath;
				preview_image(url)
			}
		})
	};
</script>

<style scoped lang="scss">
	.recharge {
		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.content {
			padding: 30rpx;
			box-sizing: border-box;

			.unit {
				color: #CCCCCC;
				font-size: 40rpx;
				font-weight: bold;
				padding-bottom: 55rpx;
				box-sizing: border-box;
			}

			.code_view {
				width: 100%;
				border-radius: 20rpx;
				padding: 40rpx 80rpx;
				box-sizing: border-box;
				background: #2F2F2F;
				display: flex;
				flex-direction: column;
				align-items: center;

				.btn {
					// width: 184rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					color: #DDF247;
					font-size: 24rpx;
					font-weight: bold;
					border-radius: 5rpx;
					margin-top: 26rpx;
					margin-bottom: 38rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					background: rgba(221, 242, 71, .2);
				}

				.key {
					color: #999999;
					font-size: 22rpx;
				}

				.value {
					color: #FFFFFF;
					font-size: 22rpx;
					word-break: break-all;
					margin-top: 20rpx;
					margin-bottom: 30rpx;
				}

				.copy {
					// width: 140rpx;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					color: #333333;
					font-size: 21rpx;
					border-radius: 5rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					background: #DDF247;
				}
			}

			.desc {
				margin-top: 44rpx;

				view {
					line-height: 32rpx;
					color: #CCCCCC;
					font-size: 22rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>